<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id="app">
			<essay title="南京x地发生xxx事" time="2024-11-29"></essay>
			<essay title="南京x地发生xxx事"></essay>
			<h1>学生信息</h1>
			<table>
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<student v-for="stu in stus" :id="stu.id" :name="stu.name" :age="stu.age">
					
				</student>
			</table>
		</div>
		
		<script>			
			
			var app = Vue.createApp({
				data(){
					return {
						"message":"Hello World!",
						"stus":[
							{
								id:101,
								name:'张三',
								age:18
							},
							{
								id:102,
								name:'李四',
								age:18
							},
							{
								id:103,
								name:'王五',
								age:18
							}
						]
						}
				}
			});
			app.component("essay",{
				template:"<div><h2>标题:{{title}}{{time}}</h2></div>",
				props:["title","time"]
			})
			
			
			app.component("student",{
				template:"<tr><td>{{id}}</td><td>{{name}}</td><td>{{age}}</td></tr>"
				props:['id','name','age']
			})
			var vm = app.mount("#app")
		</script>
	</body>
</html>
